<template>
  <div v-if="Object.keys(goods).length !== 0" class="base-info">
    <div class="info-title">{{goods.title}}</div>
    <div class="info-price">
      <span class="n-prie">￥{{goods.realPrice}}</span>
      <span class="o-prie">{{goods.oldprice}}</span>
      <span v-if="goods.discount" class="discount">{{goods.discount}}</span>
    </div>
    <div class="info-other">
      <span>{{goods.columns[0]}}</span>
      <span>{{goods.columns[1]}}</span>
      <span>{{goods.services[goods.services.length-1].name}}</span>
    </div>
    <div class="info-service">
      <span class="info-service-item" v-for="index in goods.services.length-1" :key="index">
        <img :src="goods.services[index-1].icon" alt="">
        <span>{{goods.services[index-1].name}}</span>
      </span>
    </div>
  </div>
</template>

<script>
export default {
  name: "DetailBaseInfo",
  props:{
    goods:{
      type:Object,
      default(){
        return []
      }
    }
  }
}
</script>

<style scoped>
.base-info{
  width: 96%;
  height: 400px;
  margin: auto;
}

/*标题*/
.info-title{
  margin: 10px 0;
  padding: 10px  0;
  width: 100%;
  line-height: 22px;
  font-weight: 600;
  font-size: 22px;
  color: #585858;
  box-shadow: 0 0 5px 0 rgba(0,0,0,0.2);
  border-radius: 5px;
}

/*价格*/
.info-price{
  width: 100%;
  padding: 15px 0;
  line-height: 28px;
  box-shadow: 0 0 5px 0 rgba(0,0,0,0.15);
  border-radius: 5px;
}

.n-prie{
  font-size: 28px;
  margin: 0 20px;
  font-weight: bold;

  color: var(--color-high-text);
}

.o-prie{
  font-size: 19px;
  text-decoration: line-through;
  color: #b4b4b4;
}


/*销量*/
.info-other{
  margin: 12px 0;
  width: 100%;
  font-size: 13px;
  padding: 9px 0;
  display: flex;
  justify-content: space-between;
  color: #a8a8a8;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}

/*发货时间*/
.info-service{
  width: 100%;
  font-size: 13px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 25px 0;
  color: #929292;
  border-bottom: 3px solid rgba(0,0,0,0.05);
}
.info-service img{
  width: 15px;
  height: 15px;
  margin-right: 3px;
  margin-bottom: -3px;
}
</style>